<template>
  <div class="casefile">
    <!-- 头部区域 -->
    <!-- <div class="fixed">
    </div> -->
    <el-header >
      <el-row :gutter="20">
        <el-col :span="3">
          <div class="grid-content bg-purple anjian">
             <!-- style="" -->
            <span >案件档案</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <!-- 搜索框 -->
            <el-input placeholder=" 请输入案件编号......" v-model="ajbh" clearable  >
              <el-button slot="append" icon="el-icon-search" @click ="getajbhlist"></el-button>>
            </el-input>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <!-- 日历 -->
            <el-date-picker
            v-model="calendar"
            align="right"
            type="date"
            placeholder="选择日期"
            :picker-options="pickerOptions">
            </el-date-picker>
          </div>
        </el-col>
        <!-- <el-col :span="4">
          <div class="grid-content bg-purple" style="line-height:40px">  -->
            <!-- 单选框 -->
            <!-- <el-radio v-model="radio" label="1">案发时间</el-radio>
            <el-radio v-model="radio" label="2">报警时间</el-radio>
          </div>
        </el-col> -->
        <!-- <el-col :span="2">
          <div class="grid-content bg-purple">
            <el-select v-model="value" placeholder="请选择" >
              <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value">
              </el-option>
            </el-select>
          </div>
         </el-col>
         <el-col :span="2">
          <div class="grid-content bg-purple">
            <el-select v-model="value" placeholder="请选择">
            <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
        </el-select>
          </div>
         </el-col>
         <el-col :span="2">
          <div class="grid-content bg-purple">
            <el-select v-model="value" placeholder="请选择" >
            <el-option
            v-for="item in options3"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
        </el-select>
          </div>
         </el-col>
         <el-col :span="2">
          <div class="grid-content bg-purple">
            <el-select v-model="value" placeholder="请选择" >
            <el-option
            v-for="item in options4"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
        </el-select>
          </div>
         </el-col> -->
        <!-- <el-col :span="2">
          <div class="grid-content bg-purple">
            <el-button type="primary">数据导出</el-button>
          </div>
        </el-col> -->
      </el-row>  
    </el-header>
    <!-- 主体区域 -->
    <el-main>
      <el-card class="box-card"  >
      <!-- <el-card class="box-card" > -->
        <el-row :gutter="5" v-for="(item,i) in list" :key="i">
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-card class="box-card height" >
                <!-- <div v-for="o in 4" :key="o" class="text item">
                  {{'列表内容 ' + o }}
                </div> -->
                <p>案件编号：<span class="hyperlink"  @click="gonext(item.AJBH)">{{item.AJBH}}</span></p>
                <p>案件名称：<span>{{item.AJMC}}</span></p>
                <p>案件状态：<span>{{item.AJZT}}</span></p>
                <!-- <p> -->
                  <!-- <el-button type="danger" size="mini" >未上图</el-button> -->
              
                  <!-- <el-button type="success" >已破案</el-button> -->
              
                  <!-- <el-button type="success" size="mini">已串并</el-button> -->
                  <!-- <el-button type="success" >已回访</el-button> -->
                <!-- </!--> 
                <!-- <p>{{item.AJZT}}:</p>  -->
                <p>案发时间：<span>{{item.AFSJ_KS | dateFormat}}</span></p>
                <p>案发地址：<span>{{item.AFDDXXDZ}}</span></p>
              </el-card>
            </div>
          </el-col>
          <el-col :span="11">
            
            <div class="grid-content bg-purple">
                <el-card class="box-card height">
                  <div slot="header" class="clearfix">
                    <p>
                      接警时间：<span>{{item.JJSJ | dateFormat}}</span>
                    </p>
                    <p>
                      接警单位：<span>{{item.LADW}}</span>
                    </p>
                    <!-- 接警时间 接警单位 接警人员 -->
                  </div>
                  <p> 
                   <span class="multilinehiding" :title="item.JYAQ"> 
                      2017年7月1日9时许，事主刘某（身份证号：110223********0588）在北京市朝阳区*********研究所通过手机运行网络游戏“剑侠情缘”，后在游戏看到一个账号发布售卖游戏币，事主就添加了对方的微信（账号：x6**88，昵称：文静v代销元宝），后对方通过微信给事主发送了一个链接www.u6.gg/sWQt，事主根据网站的提示进行操作后，通过支付宝（账号：137****0088）向天津盛景贸易有限公司（账号：1903640********588不明账号）支付人民币4776.59元，后事主发现被骗报警。
                      {{item.JYAQ}}
                    </span>
                  </p>
                </el-card>
            </div>
          </el-col>
          <el-col :span="5">
            <div class="grid-content bg-purple">
              <el-card class="box-card height">
                <!-- <p>办案民警</p> -->
                <div class="middle1">
                  <!-- <p>{{item.ZYBAR}}:</p> -->
                  <p>立案时间：<span>{{item.LASJ | dateFormat}}</span></p>
                  <p>立案单位：<span>{{item.LADW}}</span></p>
                  <p>破案时间：<span>{{item.PASJ | dateFormat}}</span></p>
                  <p>破案单位：<span>{{item.PADW}}</span></p>
                  <!-- <p>受理时间：<span>{{item.SLSJ | dateFormat}}</span></p>
                  <p>受理单位：<span>{{item.SLDW}}</span></p> -->
                </div>
                <!-- <div class="middle2">
                   <p>{{item.LADW}}:</p> -->
                <!-- </div> -->
              </el-card>
            </div>
          </el-col>
          <el-col :span="2">
            <div class="grid-content bg-purple" >
              <el-card class="height card4">
              <span @click="gonext(item.AJBH)">详情</span>
              </el-card>
            </div>
          </el-col>
        </el-row> 
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryData.pageNum"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="queryData.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </el-card > 
    </el-main>
  </div>
</template>
<script>
export default {

  data () {
    return {
        queryData: {
              query: "",
              pageNum: 1,
              pageSize: 5
            },
        total :0,
        // 案件列表信息
        list:[],
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        calendar: '',
        radio: '1',
        options1: [{
          value: '选项1',
          label: '回访状态'
         }, {
          value: '选项2',
          label: '全部'
         }, {
          value: '选项3',
          label: '已回访'
         }, {
          value: '选项4',
          label: '未回访'
        }],
        options2: [{
          value: '选项1',
          label: '案件状态'
         }, {
          value: '选项2',
          label: '全部'
         }, {
          value: '选项3',
          label: '已立案'
         }, {
          value: '选项4',
          label: '已破案'
        }],
        options3: [{
          value: '选项1',
          label: '串并状态'
         }, {
          value: '选项2',
          label: '全部'
         }, {
          value: '选项3',
          label: '已串并'
         }, {
          value: '选项4',
          label: '未串并'
        }],
        options4: [{
          value: '选项1',
          label: '是否上图'
         }, {
          value: '选项2',
          label: '全部'
         }, {
          value: '选项3',
          label: '已上图'
         }, {
          value: '选项4',
          label: '未上图'
        }],
        value: '',
        ajbh:'',

    }
  },

  methods: {
    gonext(id){
      this.$router.push({
        path:'/casefiledetail',
        query:{
          id:id
        }
      })
    },
    // 案件信息接口
    async getlist(){
      const res = await this.axios.get('/ynzc/xtbaAjxx/getAjdaList',{
        params: this.queryData
      })
      console.log(res);
      if (res.data.status == 200) {
        this.total = res.data.results.total
        this.list = res.data.results.data
        console.log(this.list);
        
      }
    },
    // 搜索框查询
     async getajbhlist(ajbh){
      const res = await this.axios.get('/ynzc/xtbaAjxx/getAjdaList?AJBH='+this.ajbh)
      console.log(res);
      if (res.data.status == 200) {
        this.total = res.data.results.total
        this.list = res.data.results.data
        console.log(this.list);
      }
    },
    handleSizeChange(val) {
        // console.log(`每页 ${val} 条`);
        this.queryData.pageSize = val
        this.getlist()
    },
    handleCurrentChange(val) {
        // console.log(`当前页: ${val}`);
        this.queryData.pageNum = val
        this.getlist()
    }
},

  created () {
    this.getlist()
    // this.getajbh()
  }
}
</script>

<style lang='less' scoped>
    .casefile{
    font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
    font-weight: 400;
    font-style: normal;
    font-size: 13px; 
    }
     .el-row {
     &:last-child {
      margin-bottom: 0;
     }
  }
  .el-col {
    border-radius: 4px;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding:  0;
  }
   .el-header {
    margin-bottom: 10px;
    }
  .hyperlink {
    color:blue;
  }
  .anjian {
    font-weight:700;
    font-size:18px;
    margin-left:10px;
    line-height: 40px;
  }
  .height{
    height: 140px;
  }
  .height h3 {
    margin-top: .16rem;
  }
  .height span {
    font-size:.16rem;
  }
  .middle1{
    margin-top: 20px;
  }
  .middle2{
    margin-top: 70px;
  }
  .card4{
    line-height:135px;
    text-align: center;
    color: blue;
  }
  .multilinehiding {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    
    -webkit-line-clamp: 3;
  }
</style>
